<template>
  <el-form-item label="频道">
    <!-- 父组件里面channelId初始是个空，所以下拉框中没有值，频道数据在子组件myChannel中,通过change事件传给父组件 -->
    <el-select placeholder="请选择频道" :value = 'channelId' clearable @change="hChange">
      <el-option
      v-for = 'channel in channels'
      :key = 'channel.id'
      :label="channel.name"
      :value="channel.id">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
// 使用props属性接收父组件传过来的数据，避免与父组件的walue同名，进行重命名
  props: ['channelId'], // 父组件article的数据传到了这个里面因为父组件里面是个空，所以
  model: {
    prop: 'channelId'
  },
  data () {
    return {
      channels: []
    }
  },
  created () {
    this.loadChannel()
  },
  methods: {
    async loadChannel () {
      try {
        const res = await this.$axios({
          url: '/mp/v1_0/channels',
          method: 'get'
        })
        console.log(res)
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    },
    // 此处的val是下拉框中选中的数据
    hChange (val) {
      this.$emit('input', val)
    }
  }

}
</script>
